import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import { useRecoilState } from 'recoil'
import { ImgWaterfallMock } from './mock'
import ImgCard from '../../Card/imgCard'
import { PublicService } from '../../../transfer/service/PublicService'
import { TopicService } from '../../../transfer/service/TopicService'
import { UserService } from '../../../transfer/service/UserService'
import BlankView from '../../BlankView'

interface IImgWaterfallProps {
    userId?: string
    topicId?: string
    type: string
    count: number
}

export default function ImgWaterfall(props: IImgWaterfallProps) {
    const [imgWaterfall, setImgWaterfall] = useRecoilState(ImgWaterfallMock)
    const [width, setWidth] = useState<any>()

    useEffect(() => {
        switch (props.type) {
            case 'editorial':
                new PublicService().getRecommends(0, 20).then(res => {
                    setImgWaterfall(res.data.data)
                })
                break
            case 'related':
                if (props.topicId != null) {
                    new TopicService().getTopicImg(props.topicId, 0, 10).then(res => {
                        setImgWaterfall(res.data.data)
                    })
                }
                break
            case 'topic':
                if (props.topicId != null) {
                    new TopicService().getTopicImg(props.topicId, 0, 100).then(res => {
                        setImgWaterfall(res.data.data)
                    })
                }
                break
            case 'profilePhoto':
                new UserService()
                    .getPictures(JSON.parse(localStorage.getItem('account') as any).id, 0, 100)
                    .then(res => {
                        setImgWaterfall(res.data.data)
                    })
                break
            case 'profileLike':
                new UserService().getLikes(JSON.parse(localStorage.getItem('account') as any).id, 0, 100).then(res => {
                    setImgWaterfall(res.data.data)
                })
                break
            case 'userPhotos':
                if (props.userId != null) {
                    new UserService().getPictures(props.userId, 0, 100).then(res => {
                        setImgWaterfall(res.data.data)
                    })
                }
                break
            case 'userLike':
                console.log(props.userId)
                if (props.userId != null) {
                    new UserService().getLikes(props.userId, 0, 100).then(res => {
                        setImgWaterfall(res.data.data)
                    })
                }
                break
        }
    }, [props.type, props.topicId, props.userId])

    useEffect(() => {
        $(`.${style.container}`).outerWidth(true)! > 1050 ? setWidth('70%') : setWidth('100%')
    }, [])

    return (
        <div
            className={style.container}
            style={{
                ['--count-' as any]: props.count,
                ['--width-' as any]: width
            }}>
            {imgWaterfall.length != 0 ? (
                <div className={style.content}>
                    {imgWaterfall.map((item, index) => {
                        return (
                            <div className={`${style.item} ${index}`} key={index}>
                                <ImgCard data={item} type={props.type} />
                            </div>
                        )
                    })}
                </div>
            ) : (
                <BlankView />
            )}
        </div>
    )
}
